<template>
  <div>
    <!-- 筛选条件 -->

    <!-- 问卷列表 -->
    <pro-table
      :columns="columns"
      :request="fetchQuestionnaireData"
      row-key="id"
      :pagination="pagination"
      :action-ref="setActionRef"
      header-title="问卷管理"
    >
      <template #option-render="{ dom }">
        <a-button key="primary" type="primary" @click="handleAdd">添加</a-button>
        <component :is="dom[1]" />
        <component :is="dom[0]" />
      </template>
      <template #operation="{ column, record }">
        <template v-if="column.dataIndex === 'operation'">
          <a-button type="text" @click="handleDetail(record)">详情</a-button>
          <a-button type="text" @click="handleEdit(record)">修改</a-button>
          <a-popconfirm title="确认删除么？" @ok="handleDelete(record.id)">
            <a-button type="text" status="danger">删除</a-button>
          </a-popconfirm>
        </template>
      </template>
    </pro-table>

    <!-- 新增/编辑问卷弹窗 -->
    <a-modal v-model:visible="formVisible" :title="formTitle">
      <a-form ref="formRef" :model="formData" layout="vertical">
        <a-form-item label="问卷标题" :rules="[{ required: true, message: '请输入问卷标题' }]">
          <a-input v-model="formData.title" placeholder="请输入问卷标题" />
        </a-form-item>
        <a-form-item label="问卷类型" :rules="[{ required: true, message: '请选择问卷类型' }]">
          <a-select v-model="formData.type" placeholder="请选择问卷类型">
            <a-option :value="1">单选</a-option>
            <a-option :value="2">多选</a-option>
            <a-option :value="3">问答</a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="项目类型" :rules="[{ required: true, message: '请输入项目类型' }]">
          <a-select v-model="formData.projectType" placeholder="请选择问卷类型">
            <a-option :value="1">保洁</a-option>
            <a-option :value="2">搬家</a-option>
            <a-option :value="3">保养</a-option>
            <a-option :value="4">维修</a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="收费类型" :rules="[{ required: true, message: '请输入项目类型' }]">
          <a-select v-model="formData.chargeType" placeholder="请选择问卷类型">
            <a-option :value="1">面客订单</a-option>
            <a-option :value="2">内部员工</a-option>
            <a-option :value="3">家装订单</a-option>
            <a-option :value="4">保内</a-option>
            <a-option :value="5">保外</a-option>
            <a-option :value="6">内部结算订单</a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="问卷状态" :rules="[{ required: true, message: '请选择问卷状态' }]">
          <a-select v-model="formData.status" placeholder="请选择问卷状态">
            <a-option :value="0">启用</a-option>
            <a-option :value="1">禁用</a-option>
          </a-select>
        </a-form-item>

        <!-- 动态添加选项 -->
        <a-form-item label="选项列表">
          <a-button type="primary" @click="addOption">添加选项</a-button>
          <a-list>
            <a-list-item v-for="(option, index) in formData.itemList" :key="index">
              <a-input v-model="option.title" placeholder="选项标题" />
              <a-button type="text" @click="removeOption(index)">删除</a-button>
            </a-list-item>
          </a-list>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-button @click="formVisible = false">取消</a-button>
        <a-button type="primary" @click="handleSubmit">提交</a-button>
      </template>
    </a-modal>

    <!-- 问卷详情弹窗 -->
    <a-modal v-model:visible="detailVisible" title="问卷详情">
      <p>问卷ID：{{ detail.id }}</p>
      <p>问卷标题：{{ detail.title }}</p>
      <p>问卷类型：{{ detail.type }}</p>
      <p>项目类型：{{ detail.projectType }}</p>
      <p>创建人：{{ detail.creator }}</p>
      <p>创建时间：{{ detail.createTime }}</p>
      <p>问卷状态：{{ detail.status }}</p>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, Ref } from 'vue';
import { getQuestionnaireList, saveQuestionnaire, deleteQuestionnaire } from '@/api/questionnaire'; // 假设你有一个获取问卷数据的API

export default defineComponent({
  name: 'QuestionnaireManagement',
  setup() {
    // 筛选条件
    const filter = ref({
      tag: '全部',
      dateRange: [],
      keyword: '',
    });

    // 表格列定义
    const columns = [
      { title: '问卷ID', dataIndex: 'id' },
      { title: '问卷标题', dataIndex: 'title' },
      { title: '问卷类型', dataIndex: 'type', valueEnum: {
        1: '单选',
        2: '多选',
        3: '问答'
      } },
      { title: '项目类型', dataIndex: 'projectType', valueEnum: {
        // 1保洁 2搬家 3保养 4维修
        1: '保洁',
        2: '搬家',
        3: '保养',
        4: '维修'
      }},
      {
        title: '收费类型', dataIndex: 'chargeType', valueEnum: {
          1: '面客订单',
          2: '内部员工',
          3: '家装订单',
          4: '保内',
          5: '保外',
          6: '内部结算订单'
        }
      },
      { title: '创建人', dataIndex: 'creator', hideInSearch: true },
      { title: '创建时间', dataIndex: 'createTime', valueType: 'date' },
      { title: '问卷状态', dataIndex: 'status', valueEnum: {
        0: '启用',
        1: '禁用'
      } },
      { title: '操作', dataIndex: 'operation', slotName: 'operation', hideInSearch: true },
    ];

    // 分页配置
    const pagination = ref({
      current: 1,
      pageSize: 10,
      total: 0,
    });

    // 问卷详情
    const detailVisible = ref(false);
    const detail = ref({
      id: '',
      title: '',
      type: '',
      projectType: '',
      creator: '',
      createTime: '',
      status: '',
    });

    // 新增/编辑问卷
    const formVisible = ref(false);
    const formTitle = ref('新增问卷');
    const formData = ref({
      id: '',
      title: '',
      type: '',
      projectType: '',
      chargeType: '',
      status: '',
      itemList: [] as { title: string; sort: number }[],
    });

    // 处理查询
    const handleSearch = () => {
      actionRef.value.reload();
    };

    // 处理重置
    const handleReset = () => {
      filter.value = {
        tag: '全部',
        dateRange: [],
        keyword: '',
      };
      actionRef.value.reload();
    };

    // 处理详情查看
    const handleDetail = (record) => {
      detail.value = {
        id: record.id,
        title: record.title,
        type: record.type,
        projectType: record.projectType,
        creator: record.creator,
        createTime: record.createTime,
        status: record.status,
      };
      detailVisible.value = true;
    };

    // 处理新增问卷
    const handleAdd = () => {
      formTitle.value = '新增问卷';
      formData.value = {
        id: '',
        title: '',
        type: '',
        projectType: '',
        chargeType: '',
        status: '',
        itemList: [],
      };
      formVisible.value = true;
    };

    // 处理编辑问卷
    const handleEdit = (record) => {
      formTitle.value = '编辑问卷';
      formData.value = {
        id: record.id,
        title: record.title,
        type: record.type,
        projectType: record.projectType,
        chargeType: record.chargeType,
        status: record.status,
        itemList: record.itemList || [],
      };
      formVisible.value = true;
    };

    // 处理删除问卷
    const handleDelete = async (id) => {
      await deleteQuestionnaire(id);
      actionRef.value.reload();
    };

    // 处理提交问卷
    const handleSubmit = async () => {
      try {
        await saveQuestionnaire(formData.value);
        formVisible.value = false;
        actionRef.value.reload();
      } catch (error) {
        console.error('表单校验失败', error);
      }
    };

    // 获取问卷数据
    const fetchQuestionnaireData = async (params: {
      current: number;
      pageSize: number;
    }) => {
      const response = await getQuestionnaireList({
        ...params,
        ...filter.value,
      });
      pagination.value.total = response.total;
      return {
        data: response.list,
        success: true,
        total: response.total,
      };
    };

    // 设置actionRef
    const actionRef = ref();
    const setActionRef = (ref: Ref) => {
      actionRef.value = ref;
    };

    // 添加选项
    const addOption = () => {
      formData.value.itemList.push({ title: '', sort: formData.value.itemList.length + 1 });
    };

    // 删除选项
    const removeOption = (index: number) => {
      formData.value.itemList.splice(index, 1);
    };

    return {
      filter,
      columns,
      pagination,
      detailVisible,
      detail,
      formVisible,
      formTitle,
      formData,
      handleSearch,
      handleReset,
      handleDetail,
      handleAdd,
      handleEdit,
      handleDelete,
      handleSubmit,
      fetchQuestionnaireData,
      setActionRef,
      addOption,
      removeOption,
    };
  },
});
</script>